@import './_vars.scss';
.xdh-map-tooltip{  
  position: relative;
  width: 1px;
  height: 1px;
  &__tag{
    position: absolute;
    padding: 5px;
    border-radius: $--border-radius;
    white-space:nowrap;
    transition: all 0.5s;
    &:before{
      content: '';
      position: absolute;
      display:block;
      width: 15px;
      height: 15px;
    }
    &.top{
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, calc(-100% - 10px), 0);
    
      &:before{
        left: 50%;
        bottom: -8px;
        margin-left: -6px;
        transform: rotate(135deg);
      }
    }
    &.bottom{
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, 10px, 0);
      &:before{
        left: 50%;
        top: -8px;
        margin-left: -6px;
        transform: rotate(-45deg);
      }
    }
    &.left{
      left: 50%;
      top: 50%;
      transform: translate3d(calc(-100% - 10px), -50%, 0);
      &:before{
        right: -8px;
        top: 50%;
        margin-top: -8px;
        transform: rotate(45deg);
      }
    }
    &.right{
      left: 50%;
      top: 50%;
      transform: translate3d(10px, -50%, 0);
      &:before{
        left: -8px;
        top: 50%;
        margin-top: -8px;
        transform: rotate(-135deg);
      }
    }
    &.is-dark{
      background: $--tooltips-bg-dark;
      color: $--tooltips-color-dark;
      &:before{
        background-image: linear-gradient(45deg, transparent 0, transparent 48%, $--tooltips-bg-dark 48%, $--tooltips-bg-dark 100%);
      }
    }
    &.is-light{
      background: $--tooltips-bg-light;
      color: $--tooltips-color-light;
      &:before{
        background-image: linear-gradient(45deg, transparent 0, transparent 48%, $--tooltips-bg-light 48%, $--tooltips-bg-light 100%);
      }
    }
  }
}